<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=emulateIE7" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta charset="gbk">
    <link rel="stylesheet" href="/static/css/supervise/region/all_style.css"/>
    <link rel="stylesheet" href="/static/base/common/css/sapar.css" />
    <link rel="stylesheet" href="/static/css/supervise/layui.css" media="all">
    <script type="text/javascript" src="/static/webjars/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="/static/base/common/js/jquery.js"></script>
    <script type="text/javascript" src="/static/base/common/js/sapar.js"></script>
    <script type="text/javascript" src="/static/base/common/js/WdatePicker.js"></script>
    <script type="text/javascript" src="/static/webjars/echarts/echarts.js"></script>
    <title>部门评价</title>
    <style>
        html,body{
            with:100%;
            height:100%;
            overflow:hidden;
        }
        .layui-card{
            background-color: rgba(255,255,255,0.05);
        }

        .table-depart .layui-card{
            width:100%;
            height:100%;
            background-color:#0D0D0D;
            color:white;
        }

        .table-depart .layui-card-header{
            color:#fff;
            height:5%;
            background:#009688;
            padding:8px 0px;
            border-bottom: 0px;
        }

        .table-depart .layui-card-body{
            height:85%;
            overflow-x:hidden ;
            overflow-y: auto;
        }
        .table-depart .layui-card-body ul li{
            margin:10px 0px;
            width:100%;
            text-align: left;
        }
        .table-depart .layui-card-body ul li a{
            color:white;
        }
        .table-depart .layui-card-body ul li .user img{
            padding:0 5px;
            width:40px;
            height:40px;
            border-radius:50%;
        }

        /*滚动条样式设置*/
        .table-depart .layui-card .layui-card-body::-webkit-scrollbar,dl::-webkit-scrollbar {/*滚动条整体样式*/
            width: 4px;     /*高宽分别对应横竖滚动条的尺寸*/
            height: 4px;
        }
        .table-depart .layui-card .layui-card-body::-webkit-scrollbar-thumb,dl::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
            border-radius: 5px;     -webkit-box-shadow: inset 0 0 5px rgba(255,255,255,0.1);
            background: rgba(0,0,255,0.05);
        }
        .table-depart .layui-card .layui-card-body::-webkit-scrollbar-track,dl::-webkit-scrollbar-track {/*滚动条里面轨道*/
            -webkit-box-shadow: inset 0 0 5px rgba(255,255,255,0.1);
            border-radius: 0;
            background: rgba(0,0,255,0.05);
        }
    </style>

</head>

<body style="background-color: #f5f5f5;position:relative;overflow-x: hidden;">
<canvas id="c" style=" position: absolute;top: 0;left: 0;background-color: black;position:absolute;z-index:0;"></canvas>
<div class="layui-row layui-col-space15" style="height:40%;">
    <div class="layui-col-md4 layui-col-sm12" style="height:100%;">
        <div class="layui-card" style="height:40%;">
            <div class="layui-card-header" style="height:10%;">部门工作量</div>
            <div class="layui-card-body" style="height: 90%;text-align: center;">
                <div class="wrapper" >
                    <div class="counter col_fourth">
                        <i class="fa fa-code fa-2x"></i>
                        <h2 class="timer count-title" id="count-number1">300</h2>
                        <p class="count-text ">上报数</p>
                    </div>

                    <div class="counter col_fourth">
                        <i class="fa fa-coffee fa-2x"></i>
                        <h2 class="timer count-title" id="count-number2">17870</h2>
                        <p class="count-text ">受理数</p>
                    </div>
                </div>

                <div class="counter col_fourth ">
                    <i class="fa fa-bug fa-2x"></i>
                    <h2 class="timer count-title" id="count-number3">157</h2>
                    <p class="count-text ">结案数</p>
                </div>
                <div class="counter col_fourth end">
                    <i class="fa fa-bug fa-2x"></i>
                    <h2 class="timer count-title" id="count-number4">124</h2>
                    <p class="count-text ">总事件数</p>
                </div>

            </div>

        </div>


        <div class="layui-card" style="height:55%;">
            <div class="layui-card-body" style="height: 100%;">
                <div id="charts1" style="height: 100%;">
                </div>
            </div>
        </div>

    </div>

    <div class="layui-col-md8 layui-col-sm12" style="height:100%;">
            <div class="layui-card" style="height:100%;">
                <div class="layui-card-header" style="height:6%;">部门事件</div>
                <div class="layui-card-body" style="height:94%;">
                    <div id="charts2" style="width:83%;height:90%;float: right;"></div>
                    <div class="table-depart" style="width:15%;height:90%;float:left;margin-right:0px;">
                        <div class="layui-card">
                            <div class="layui-card-header">
                                部门信息
                            </div>
                            <div class="layui-card-body">
                                <ul>
                                    <c:forEach items="${departs}" var="depart">
                                        <li>
                                            <div class="user">
                                                <a href="javascript:void(0);" data-id="${depart.id}"><img src="/static/images/special/position.png" alt=""/><span>${depart.name}</span></a>
                                            </div>
                                        </li>
                                    </c:forEach>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
    </div>
</div>

<%--控制中间位置--%>
<div class="layui-row layui-col-space15" style="height:4%;"></div>

<div class="layui-row layui-col-space15" style="height:55%;">



    <div class="layui-col-md8" style="height:100%;">
        <div class="layui-card" style="height:100%;">
            <div class="layui-card-header" style="height:10%;">评分占比</div>
            <div class="layui-card-body" style="height:90%;">
                <div id="charts4" style="height:100%; "></div>
            </div>
        </div>
    </div>
<%--    <div class="layui-col-md4">
        <div class="layui-card">
            <div class="layui-card-header">评分占比</div>
            <div class="layui-card-body">
                <div id="charts5" style="height: 400px; "></div>
            </div>
        </div>
    </div>--%>

    <div class="layui-col-md4" style="height:100%;">
        <div class="layui-card" style="height:100%;">
            <div class="layui-card-header" style="height:10%;">事件分析</div>
            <div class="layui-card-body" style="height:90%;">
                <div id="charts3" style="height: 100%; "></div>
            </div>
        </div>
    </div>

</div>


<%--<div class="layui-row layui-col-space15">
    <div class="layui-col-md12">
        <div class="layui-card">
            <div class="layui-card-header">事件分析</div>
            <div class="layui-card-body">
                <div id="charts6" style="height: 400px; "></div>
            </div>
        </div>
    </div>



</div>--%>








</body>
<%--<script type="text/javascript" src="/static/js/supervise/region/index.js"></script>
<script type="text/javascript" src="/static/js/supervise/region/jquery.js"></script>--%>
<script type="text/javascript" src="/static/js/jquery.min.js"></script>
<script src="/static/js/supervise/depart/depart_static_show.js"></script>
<script type="text/javascript" src="/static/js/special/dat.gui.min.js"></script>
<script type="text/javascript" src="/static/js/special/index.js"></script>
<script type="text/javascript" src="/static/js/special/countUp.min.js"></script>

</html>